<template>
	<div class="image-pro-form">
		<el-form ref="dataFormRef" :model="dataForm" label-width="100px" size="small">
			<el-form-item label="透雾" prop="defogSelect">
				<el-select v-model="dataForm.defogSelect" class="m-2" placeholder="请选择">
					<el-option v-for="(item, index) in optionLevel2" :key="index" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item v-if="dataForm.defogSelect == 1" label="透雾等级" prop="defogLevel">
				<el-select v-model="dataForm.defogLevel" class="m-2" placeholder="请选择">
					<el-option v-for="(item, index) in optionUseLevel" :key="index" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item label="2D降噪" prop="nr2DMode">
				<el-select v-model="dataForm.nr2DMode" class="m-2" placeholder="请选择">
					<el-option v-for="(item, index) in optionLevel2" :key="index" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item v-if="dataForm.nr2DMode == 1" label="2D降噪等级" prop="nr2DLevel">
				<el-slider v-model="dataForm.nr2DLevel" style="width: 214px" />
			</el-form-item>
			<el-form-item label="降噪限制" prop="nrLimitSw">
				<el-select v-model="dataForm.nrLimitSw" class="m-2" placeholder="请选择">
					<el-option v-for="(item, index) in optionLevel2" :key="index" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item label="3D降噪" prop="nr3DMode">
				<el-select v-model="dataForm.nr3DMode" class="m-2" placeholder="请选择">
					<el-option v-for="(item, index) in optionLevel3" :key="index" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item v-if="dataForm.nr3DMode == 1" label="3D降噪空域" prop="nr3DLevel">
				<el-slider v-model="dataForm.nr3DLevel" style="width: 214px" />
			</el-form-item>
			<el-form-item v-if="dataForm.nr3DMode == 1" label="3D降噪时域" prop="nr3D2Level">
				<el-slider v-model="dataForm.nr3D2Level" style="width: 214px" />
			</el-form-item>
			<el-form-item label="防抖" prop="stabMode">
				<el-select v-model="dataForm.stabMode" class="m-2" placeholder="请选择">
					<el-option v-for="(item, index) in optionLevel2" :key="index" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item v-if="dataForm.stabMode == 1" label="防抖等级" prop="stabLevel">
				<el-select v-model="dataForm.stabLevel" class="m-2" placeholder="请选择">
					<el-option v-for="(item, index) in optionUseLevel" :key="index" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item label="热浪去除等级" prop="hotWaveLevel">
				<el-slider v-model="dataForm.hotWaveLevel" style="width: 214px" :max="10" />
			</el-form-item>
			<el-form-item label="" label-width="0">
				<div style="margin: auto; text-align: center">
					<el-button type="primary" @click="saveHandle">保存</el-button>
				</div>
			</el-form-item>
		</el-form>
	</div>
</template>

<script setup lang="ts">
import { keys, assign, pick } from 'lodash'
import { reactive, ref, onMounted } from 'vue'
import { useGetVisibleCfgApi, useSaveVisibleCfgApi } from '@/api/settingModule'
import { ElMessage } from 'element-plus/es'

const props = defineProps({
	options: {
		type: Object,
		default() {}
	}
})

const dataFormRef = ref()
const dataForm = reactive({
	channelId: '', // 设备id
	brightness: 0, // 亮度 0~100
	contrast: 0, // 对比度 0~100
	saturation: 0, // 饱和度 0~100
	sharpness: 0, // 锐度 0~100
	stabMode: 0, // 防抖模式（0:关闭；1：打开）
	stabLevel: 0, //防抖等级（0：高；1：中；2：低）
	defogSelect: 0, // '透雾模式（0：关闭；1：打开；2：自动）'
	defogLevel: 0, //透雾等级（0：高；1：中；2：低）
	nrLimitSw: 0, //降噪限制（0：关闭；1：打开）
	nr2DMode: 0, //2D降噪模式（0：关闭；1：打开）
	nr2DLevel: 0, //2D降噪等级 0~100
	nr3DMode: 0, //3D降噪模式（0：关闭；1：打开;2:自动）
	nr3DLevel: 0, //3D降噪空域等级 0~100
	nr3D2Level: 0, //3D降噪时域等级 0~100
	hotWaveLevel: 0 //热浪去除等级 0~10
})

const optionLevel2 = ref([
	{ label: '关闭', value: 0 },
	{ label: '打开', value: 1 }
])

const optionLevel3 = ref([
	{ label: '关闭', value: 0 },
	{ label: '打开', value: 1 },
	{ label: '自动', value: 2 }
])

const optionUseLevel = ref([
	{ label: '高', value: 0 },
	{ label: '中', value: 1 },
	{ label: '低', value: 2 }
])

const saveHandle = () => {
	useSaveVisibleCfgApi(dataForm).then(() => {
		ElMessage.success({
			message: '保存成功',
			duration: 1000,
			onClose: () => {}
		})
	})
}

const getDetail = async () => {
	const { data } = await useGetVisibleCfgApi({ channelId: props.options.channelId })
	assign(dataForm, pick(data, keys(dataForm)))
}

onMounted(() => {
	getDetail()
})
</script>
